<template>
  <div class="home" style="height:calc(100vh - 64px)">
    <div  class="mintor-body">
      <div  v-if="!monitorData.isLoadPlayer">
        <Form class="monitor-form" :label-width="300" inline>
          <FormItem label="当前路段:" :label-width="160">
            <Select v-model="switchWay" :label-width="160">
              <Option v-for="item in wayList" :value="item" :key="item">
                {{ item }}
              </Option>
            </Select>
          </FormItem>
        </Form>
        <monitor-grid ></monitor-grid>
      </div>
      <video-player-detail v-else></video-player-detail>
    </div>
    

    <!-- 错误提示框 -->
    <!-- <Modal v-model="showError" draggable width="500" :styles="{top: '30vh'}">
      <p slot="header" style="height:40px;line-height:40px;color:#f60;text-align:center;font-size:30px;">
        <Icon type="ios-information-circle"></Icon>
        <span>提示</span>
      </p>
      <div style="text-align:center;font-size:24px;height:60px;line-height:60px;">
        <p>当前的视频流不可用，请尝试其他站点</p>
      </div>
      <div slot="footer">
        <Button style="font-size:24px;"
        type="error" size="large" long @click="updateVideoStreamState">确定</Button>
      </div>
    </Modal> -->
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions} from 'vuex'

import MonitorMain from './monitorMain'
import MonitorGrid from './monitorGrid'
import VideoPlayerDetail from './videoPlayerDetail'

export default {
  components: {
    MonitorMain,
    MonitorGrid,
    VideoPlayerDetail
  },
  data () {
    return {
      showError: false
    }
  },
  computed: {
    ...mapState([
      'monitorData',
      'videoPlayerState',
      'wayList',
      'switchWay'
    ]),
    switchWay:{
      get(){
        return this.$store.state.switchWay;
      },
      set(val){
        this.$store.dispatch('changeSwitchWay',val)
      }
    }
  },
  watch: {
    videoPlayerState: {
      deep: true,
      handler(value) {
        //console.log(value)
        if(value.getStreamUrlState === 404) this.showError = true
        if(value.getStreamUrlState === 200) this.showError = false

      }
    }
  },
  methods: {
    ...mapActions([
      'getStationVideoStreamUrl',
      'updateGetStationVideoStreamState200'
    ])
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@font-color: #fff !important;

.monitor-home {
  padding: 20px 40px;
  // background-color: #0a4271;
  background: url("../../assets/bg.jpg") center;
  /* box-sizing: border-box; */
  //border:1px solid #F00;
  

}
.mintor-body{
  //border:1px solid #F00;
  margin-top: 0%;
  
}
.monitor-form .ivu-form {
  font-size: 2.4rem !important;
}
.monitor-form .ivu-form-item-label {
  font-size: 2.4rem !important;
  color: @font-color;
  font-weight: bold;
}
.monitor-form .ivu-form-item-content {
  line-height: 40px;
}
.monitor-form .ivu-select-selected-value {
  font-size: 2.4rem !important;
  height: 32px !important;
  line-height: 32px !important;
  color: @font-color;
  font-weight: bold;
}
.monitor-form .ivu-select-selection {
  width: 180px;
  height: 32px !important;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.monitor-form .ivu-select-dropdown {
  background-color: @background-color;
  max-height: 300px;
}
.monitor-form .ivu-select-item {
  color: @font-color;
  font-size: 2rem !important;
  font-weight: bold;
}
.monitor-form .ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #52c41a !important;
}
.monitor-form .ivu-select-placeholder {
  font-size: 2.4rem !important;
  height: 32px !important;
  line-height: 32px !important;
  font-weight: bold;
}
.ivu-select-item-focus {
  background-color: @background-color;
}
.ivu-select-item:hover {
  background-color: #1081b3 !important;
}
.vertical-center-modal{
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 90;
  }
}
.ivu-radio-wrapper-checked {
  border-color: #fff !important;
  color: #fff !important;
}
</style>
